<template>
  <a-drawer v-model:open="open"
            :keyboard="false"
            title="查看工作经验"
            :mask-closable="false"
            width="50%"
            footer=""
            wrap-class-name="full-modal"
            @close="handleClose"
            @cancel="handleClose">
    <div class="content-body container">
      <a-row :gutter="40">
        {{itemObj}}
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw"><span class="mr6">上船日期：</span><span>互海1号</span></div>
          <div class="gutter-box fw"><span class="mr6">上船港口：</span><span>木匠</span></div>
          <div class="gutter-box fw"><span class="mr6">上船当天出勤(天)：</span><span></span></div>
          <div class="gutter-box fw"><span class="mr6">下船原因：</span><span>xxxx</span></div>
          <div class="gutter-box fw"><span class="mr6">备注：</span><span>xxxx</span></div>
          <div class="gutter-box fw"><span class="mr6">职位：</span><span>xxxx</span></div>
          <div class="gutter-box fw"><span class="mr6">任职说明：</span><span>xxxx</span></div>
          <div class="gutter-box fw"><span class="mr6">船型：</span><span>xxxx</span></div>
          <div class="gutter-box fw"><span class="mr6">总吨(吨)：</span><span>xxxx</span></div>
          <div class="gutter-box fw"><span class="mr6">主机功率(千瓦)：</span><span>xxxx</span></div>
          <div class="gutter-box fw"><span class="mr6">附件：：</span><span>xxxx</span></div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw"><span class="mr6">下船日期：</span><span>马士城</span></div>
          <div class="gutter-box fw"><span class="mr6">下船港口：</span><span></span></div>
          <div class="gutter-box fw"><span class="mr6">工作船舶：</span><span>0.5 </span></div>
          <div class="gutter-box fw"><span class="mr6">兼任职务：</span><span>0.5 </span></div>
          <div class="gutter-box fw"><span class="mr6">载重吨：</span><span>0.5 </span></div>
          <div class="gutter-box fw"><span class="mr6">主机型号：</span><span>0.5 </span></div>
          <div class="gutter-box fw"><span class="mr6">航区：</span><span>0.5 </span></div>
        </a-col>
      </a-row>
      <a-divider></a-divider>
      <div class="flex" style="justify-content: flex-end">
        <a-button type="primary" class="mr10">船员资料导出</a-button>
        <a-button type="primary">查看该船员信息</a-button>
      </div>
      <h3>船员调动计划</h3>
      <div class="gui-padding" style="background:#fef1e0">
        <div style="text-align: center" class="fw">离船申请</div>
        <a-row :gutter="40">
          <a-col class="gutter-row" :span="12">
            <div class="gutter-box fw"><span class="mr6">离船申请单号：</span><span>DA-24073101</span></div>
            <div class="gutter-box fw"><span class="mr6">计划下船日期：</span><span>2024-07-31 - 2024-07-31</span></div>
          </a-col>
          <a-col class="gutter-row" :span="12">
            <div class="gutter-box fw"><span class="mr6">状态：</span><span>审批通过</span></div>
            <div class="gutter-box fw"><span class="mr6">下船船员：</span><span>杨蝶</span></div>
          </a-col>
        </a-row>
      </div>
    </div>
    <template #footer>
      <div class="gui-padding">
        <a-button type="primary" class="mr10">编辑</a-button>
        <a-button type="default" @click="handleClose">取消</a-button>
      </div>
    </template>
  </a-drawer>
</template>
<script setup>
const open = ref(false)
const itemObj = ref({})
const handleClose = ()=>{
  open.value = false;
}

const handleOpen = (record)=>{
  itemObj.value = record
  open.value = true;
}

defineExpose({
  handleOpen
})
</script>
<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    border-radius: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    border-radius: 0;
    padding:0px;
  }
  .ant-modal-body {
    flex: 1;
  }
  .content-body{
    padding:20px 24px;
  }
}
</style>